<template>
  <div class="">
    <p>kepp-alive</p>
    <p>kepp-alive</p>
    <p>kepp-alive</p>
    <p>kepp-alive</p>
    <p>kepp-alive</p>
    <p>kepp-alive</p>
    <p>kepp-alive</p>
    <p>kepp-alive</p>
    <input type="text" />
    {{ obj }}
    <button @click="edit">切换</button>
    <meyHeader>
      <template v-slot:default="slotProps">
        {{ slotProps.firstName }}
      </template>
    </meyHeader>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
let router = useRouter();
import meyHeader from "../components/meyHeader.vue";
let obj = ref("你好");
let firstName = ref("666");
function edit() {
  obj.value = "真好";
  router.push({ path: "/About" });
}
components: {
  meyHeader;
}
</script>

<style lang="scss" scoped>
p {
  margin: 80px 0;
}
</style>
